<template>
	<view>
		<!-- 头部导航 -->
		<page-header :headInfo="headInfo"></page-header>
		<view class="login-logo">
			<view><image src="../../static/dog/1.jpg" mode="aspectFill"></image></view>
			<view class="login-title">四叶图集</view>
		</view>
		
		<view class="login-description">您暂未获取微信授权，将无法正常使用小程序的部分功能~如需要正常使用，请点击“授权登录”按钮，打开头像，昵称等信息的授权。</view>
		
		<view class="auth-login-btn">
			<button type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo" style="background-color: #0081ff;">
				授权登录
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headInfo:{
					title:'授权登录'
				}
			}
		},
		onLoad() {
			
		},
		/**
		 * @author smallfour
		 * @description 分享好友
		 */
		onShareAppMessage(res){
			return {
				title:'四叶图集',
				imageUrl:'http://image.hermit.love/IMG_3494.JPG',
				path:'/pages/tabBar/index'
			}
		},
		/**
		 * @author smallfour
		 * @description 分享朋友圈
		 */
		onShareTimeline(){
			return {
				title:'四叶图集',
				imageUrl:'http://image.hermit.love/IMG_3494.JPG',
				path:'/pages/tabBar/index'
			}
		},
		methods: {
			/** 
			 * @author smallfour
			 * @description 授权登录
			 */
			wxGetUserInfo:function(e){
				const that = this;
				if(e.detail.errMsg != 'getUserInfo:ok'){
					return false;
				}
				uni.login({
					provider:'weixin',
					success:function(res) {
						uni.showLoading({title: '登录中'});
						let obj = e.detail.userInfo;
						obj.code = res.code;
						that.$api.wxLogin(obj).then(res => {
							if(res.code == 200){
								that.msg('登录成功');
								uni.setStorage({
									key:"loginStatus",
									data:{
										isLogin:true,
										token:res.data.token
									}
								})
								setTimeout(function(){
									uni.switchTab({
										url:'/pages/tabBar/index'
									})
								},1000)
							}else{
								that.msg(res.errmsg);
							}
						})
					},
					fail:function(err) {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-logo{
		text-align: center;
		image{
			width: 150rpx;
			height: 150rpx;
			margin: 40rpx 0;
			border-radius: 50%;
		}
		.login-title{
			font-size: 36rpx;
			font-weight: 700;
			// padding: 30rpx 0 50rpx;
		}
	}
	
	.login-description{
		font-size: 24rpx;
		margin: 50rpx;
		color: #bebebe;
	}
	
	.auth-login-btn{
		button{
			width: 360rpx;
			border-radius: 100rpx;
		}
	}
</style>
